<template>
    <el-row class="login-container">
        <el-col :lg="16" :md="12" class="left">
            <div>
                <div>Greyson交易所后台</div>
                <div>这里是Greyson交易所的后台管理系统</div>
            </div>
        </el-col>

        <el-col :lg="8" :md="12" class="right">
            <h2  class="title">欢迎回来</h2>
            <div>
                <span class="line"></span>
                <span >账号密码登录</span>
                <span class="line"></span>
            </div>
            <el-form ref="formRef" :rules="rules" :model="form" class="w-[250px]">
                <el-form-item prop="username">
                    <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password"> 
                    <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button color="#626aef" class="w-[250px]" type="primary" @click="onSubmit">登录</el-button>
                </el-form-item>
                <div class="regLink">
                    <div class="bank"></div>
                    <div class="text" @click="goRegister">快速注册</div>
                    <!-- <div v-if="pagStatus == 1" class="text" @click="pagStatus = 0">立即登录</div> -->
                </div>
            </el-form>
        </el-col>

        <!-- 重置密码 或 注册 对话框 -->
        <el-dialog v-model="dialogFormVisible" title="快速注册" class="dialog" center width="50%">
            <el-form :model="formRegister" class="form" :rules="rulesReg" ref="formReg">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="formRegister.username"  size="small" class="w-50" placeholder="用于登录的账号(电话/邮箱)"/>
                    </el-form-item>
                    <el-form-item label="昵称" prop="nickname">
                        <el-input v-model="formRegister.nickname"  size="small" class="w-50" placeholder="展示给好友看的昵称"/>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="formRegister.password"  size="small" type="password" class="w-50" placeholder="用来登录的密码"/>
                    </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelReg">取消</el-button>
                    <el-button type="primary" @click="onSubmit">
                        确定注册
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </el-row>
</template>

<script setup>
    import { ref, reactive } from 'vue'
    import { toast } from '../core/util'
    import { login,register } from '../api/manager'
    import { useRouter } from 'vue-router'
    import { ElMessage } from 'element-plus'
    import { encrypt,decrypt} from '../core/util'

    const router = useRouter()

    //对话框
    const dialogFormVisible = ref(false)

    //0=>登录页面  1=>注册页面
    const pagStatus = ref('0')

    //do not use the same name with ref
    const form = reactive({
        username:'',
        password:''
    })

    const formRegister = reactive({
        username:'',
        nickname:'',
        password:''
    })

    const goRegister = () => {
        pagStatus.value = '1'
        dialogFormVisible.value = true
        console.log(pagStatus.value);
    }
    const cancelReg = () =>{
        pagStatus.value = '0'
        dialogFormVisible.value = false
        console.log(pagStatus.value);
    }

    //定义检验标准
    const rules = {
        username:[
            {
                required:true,  //必填
                message:'用户名不能为空', //错误提示信息
                trigger:'blur'  //失去焦点时进行检验
            },
            { min: 2, max: 12, message: '账号长度要在 2 到 12 个字符内', trigger: 'blur' }
        ],
        password:[
            {
                required:true,
                message:'密码不能为空',
                trigger:'blur'
            },
            { min: 2, max: 12, message: '密码长度要在 2 到 12 个字符内', trigger: 'blur' }
        ]
    }

    const rulesReg = {
        username:[
            {
                required:true,  //必填
                message:'用户名不能为空', //错误提示信息
                trigger:'blur'  //失去焦点时进行检验
            },
            { min: 2, max: 12, message: '账号长度要在 2 到 12 个字符内', trigger: 'blur' }
        ],
        nickname:[
            {
                required:true,
                message:'昵称不能为空',
                trigger:'blur'
            },
            { min: 2, max: 12, message: '昵称长度要在 2 到 12 个字符内', trigger: 'blur' }
        ],
        password:[
            {
                required:true,
                message:'密码不能为空',
                trigger:'blur'
            },
            { min: 2, max: 12, message: '密码长度要在 2 到 12 个字符内', trigger: 'blur' }
        ]
    }

    //获取dom节点
    const formRef = ref(null)
    const formReg = ref(null)

    //登录/注册
    const onSubmit = () =>{
        //pageStatus: 0=>登录  1=>注册
        const api = pagStatus.value==0? login : register
        const formVali = pagStatus.value==0? formRef : formReg
        formVali.value.validate((valid,fields)=>{
            if(!valid){
                console.log('noValid',fields);
                ElMessage.error('请输入正确的格式！')
                return false
            }
            const dataLog = {
                username:form.username,
                password:form.password
            }
            const dataReg = {
                username:formRegister.username,
                nickname:formRegister.nickname,
                password:formRegister.password
            }
            let data = pagStatus.value==0? dataLog : dataReg
            console.log('data',data);
            api(data).then(res => {
                console.log('api',res)
                if(res.code == 251){ return ElMessage('账号不要超过11位!') }
                if(res.code == 200){
                    if(pagStatus.value =='0'){
                        localStorage.setItem('token',res.data.token)
                        localStorage.setItem('user_id',res.data.user_id)
                        sessionStorage.setItem('userInfo',JSON.stringify(res.data))
                        console.log(res.data.is_admin)
                        //用户管理身份加密
                        const enc = encrypt((res.data.is_admin).toString())
                        localStorage.setItem('sec',enc)
                        toast('登录成功')
                        router.push('/')
                    }else{
                        toast('注册成功')
                    }
                    
                }else{
                    ElMessage.error(res.msg)
                }
                // if(res.status != 0){ return toast('账号或密码错误') }
                // uStore.setToken(res.token)
                pagStatus.value = '0'
                dialogFormVisible.value = false
                console.log(pagStatus.value);
            })
            
        })
       
    }

</script>

<style scoped>
    .login-container{
        @apply min-h-screen bg-blue-300
    }
    .left{
        @apply bg-blue-300 flex justify-center items-center
    }
    .left>div>div:first-child{
        @apply font-bold text-5xl text-light-50 mb-4
    }
    .left>div>div:last-child{
        @apply text-light-100 text-2xl text-sm
    }
    .right{
        @apply bg-white flex justify-center items-center flex-col
    }
    .right .title{
        @apply font-bold text-3xl text-gray-800;
    }
    .right>div{
        @apply flex items-center justify-center my-5 text-gray-300 space-x-2;
    }
    .right .line{
        @apply h-[1px] w-16 bg-gray-200;
    }

    .regLink{
        font-size: 10px;
        display: flex;
        justify-content: space-between;
        margin-top: -6px;
        color: gray;
        cursor: pointer;
    }

    .w-50{
        width: 200px;
    }
    .dialog{
        width: 600px;
        /* display: flex; */
    }
    .form{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>